<template>
  <div class="addBg">
    <el-dialog
      :title="bgName"
      :visible.sync="addDialogVisible"
      width="60%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <el-form :model="addBgForm" :rules="rules" ref="addBgForm" label-width="100px" class="addBgForm">
        <div class="addBgForm-left">
          <el-form-item label="名称" prop="name">
            <el-input v-model="addBgForm.name"></el-input>
          </el-form-item>
          <el-form-item label="上线时间" class="time-item" prop="timeRange">
            <el-date-picker
              v-model="addBgForm.timeRange"
              :picker-options="pickerOptions"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
           <el-form-item class="addBgBtn">
            <el-button style="background: #4065E0; color: #fff" @click="define('addBgForm')" :disabled="isUpload">保 存</el-button>
            <el-button style="background: #EEEEEE; color: #333333" @click="cancel('addBgForm')">取 消</el-button>
              
              <!-- 添加背景的值考虑是否存在vuex中 -->
          </el-form-item>
        </div>
        <div class="addBgForm-right">
           <el-form-item prop="imgUrl" ref="upload" class="addBgForm-upload">
              <el-upload
              class="upload"
              :class="{ isHide: hideUpload }"
              action="http://161.117.83.241:6060/comp/background/upload"
              list-type="picture-card"
              :on-remove="handleRemove"
              :limit="limitCount"
              :auto-upload="true"
              :accept="'image/*'"
              :on-change="imgPreview"
              :http-request="handUpload"
              >
                <i>点这里上传</i>
              </el-upload>
              <p class="size"> 1920PX * 1080PX </p>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addBackground, backgroundUpload } from 'api/backgroundController/backgroundController'
export default {
  name: "AddBgImg",
  props: {
    moduleId: {
      type: Number
    },
    appId: {
      type: String
    },
    bgName: {
      type: String
    }
  },
  data() {
    return {
        addDialogVisible: true,
        isUpload: true,
        pickerOptions: {
          disabledDate: (time) => {
            return time.getTime() < Date.now()
          }
        },
        addBgForm: {
            name: '',
            imgUrl: '',
            timeRange: []   // 包含开始时间和结束时间的一个数组
        },
        rules: {
          name: [
            { required: true, message: "请输入背景名称", trigger: 'blur' }
          ],
          imgUrl: [
            { required: true, message: "请选择背景图片", trigger: 'change' }
          ],
          timeRange: [
            { required: true, message: "请选择启用时间", trigger: 'change' }
          ]
        },
        hideUpload: false,
        limitCount: 1
    };
  },
  methods: {
      cancel(formName) {
          this.$emit('sendBolean',false)
          this.$refs[formName].resetFields()
      },
      define(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              var params = {
                appId: this.appId,
                name: this.addBgForm.name,
                image: this.addBgForm.imgUrl,
                moduleId: this.moduleId,
                startTime: new Date(this.addBgForm.timeRange[0]).toISOString(),
                endTime: new Date(this.addBgForm.timeRange[1]).toISOString()
              }
              addBackground(params).then(res => {
                if(res.resultCode == 1){
                  console.log(res.data)
                  this.$message.success(res.resultMsg)
                  this.$emit('formData',res.data)
                  this.$emit('sendBolean',false)
                }else{
                  this.$message.error(res.resultMsg)
                }
              })
              .catch(res => {
                this.$message.error("服务器异常")
              })
              
            } else {
              console.log('error submit!!');
              return false;
            }
          });
          
      },
      // 移除图片的回调
      handleRemove(file, fileList){
          this.hideUpload = fileList.length >= this.limitCount;
          this.$refs.upload.resetField()
      },
      // 图片地址
      imgPreview(file, fileList){
        // this.addBgForm.imgUrl = file.url
        this.$refs.upload.clearValidate()
        this.hideUpload = fileList.length >= this.limitCount;
      },
      
      // 自定义上传
      handUpload(a){
            var file = a.file
            let fileDate = new FormData()
            fileDate.append('uploadFile',file)
            backgroundUpload(fileDate).then(res => {
                console.log(res)
                if(res.resultCode == 1){
                    this.addBgForm.imgUrl = res.data.picUrl
                    this.$message.success(res.resultMsg)
                    this.isUpload = false
                }else{
                    this.$message.error(res.resultMsg)
                }
            })
            .catch(res => {
                this.$message.error('上传失败')
            })
        },
     
  },
  created(){
    
  }
  
};
</script>

<style lang="scss" scoped>
.addBg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  .addBgForm{
    display: flex;
    .addBgForm-left{
      flex: 1;
      width: 460px;
      .time-item{
        margin-top: 50px;
      }
      .addBgBtn{
        margin-top: 200px;
      }
    }
    .addBgForm-right{
      flex: 1;
      
    }
  }
  .line{
      text-align: center;
  }
  .el-button{
      width: 100px;
  }
  .el-button+.el-button{
      margin-left: 30px;
  }
}
</style>

